<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    	<style type="text/css">
    	body{
    		margin: 0;
    		padding: 0;
    		overflow: hidden;
    	}
			div{
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				background-color: cyan;
				float: left;
				margin-bottom: 100px;
				cursor: move;
				user-select: none;
			}
			#box{
				width: 800px;
				height: 500px;
				background-color: pink;
				display:block;
				float: left;
				position:absolute;
				left: 0;
				top: 100px;
			}
    	</style>
    <body>
    <div id="q">一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
	<span id="box"></span>

    </body>
    <script type="text/javascript">
    var a;
    var flag;
    	q.onmousedown=function() {
    		flag = true;
    		a = this.cloneNode(true);
    		console.log(a)
    	}
    	box.onmousemove=function  (e) {
    		if(flag){
    			this.appendChild(a)
    		a.style.position="absolute";
    		a.style.left = e.clientX-20+"px";
    		a.style.top = e.clientY-120+"px";
    		console.log(a)
    		}
    		
    	}
    	box.onmouseup=function  () {
			flag=false;
    	}
    </script>
</html>